<!DOCTYPE html>
<html lang="zh-CN">

<!--小站不易，手下留情！
 /***
 *               ii.                                         ;9ABH,
 *              SA391,                                    .r9GG35&G
 *              &#ii13Gh;                               i3X31i;:,rB1
 *              iMs,:,i5895,                         .5G91:,:;:s1:8A
 *               33::::,,;5G5,                     ,58Si,,:::,sHX;iH1
 *                Sr.,:;rs13BBX35hh11511h5Shhh5S3GAXS:.,,::,,1AG3i,GG
 *                .G51S511sr;;iiiishS8G89Shsrrsh59S;.,,,,,..5A85Si,h8
 *               :SB9s:,............................,,,.,,,SASh53h,1G.
 *            .r18S;..,,,,,,,,,,,,,,,,,,,,,,,,,,,,,....,,.1H315199,rX,
 *          ;S89s,..,,,,,,,,,,,,,,,,,,,,,,,....,,.......,,,;r1ShS8,;Xi
 *        i55s:.........,,,,,,,,,,,,,,,,.,,,......,.....,,....r9&5.:X1
 *       59;.....,.     .,,,,,,,,,,,...        .............,..:1;.:&s
 *      s8,..;53S5S3s.   .,,,,,,,.,..      i15S5h1:.........,,,..,,:99
 *      93.:39s:rSGB@A;  ..,,,,.....    .SG3hhh9G&BGi..,,,,,,,,,,,,.,83
 *      G5.G8  9#@@@@@X. .,,,,,,.....  iA9,.S&B###@@Mr...,,,,,,,,..,.;Xh
 *      Gs.X8 S@@@@@@@B:..,,,,,,,,,,. rA1 ,A@@@@@@@@@H:........,,,,,,.iX:
 *     ;9. ,8A#@@@@@@#5,.,,,,,,,,,... 9A. 8@@@@@@@@@@M;    ....,,,,,,,,S8
 *     X3    iS8XAHH8s.,,,,,,,,,,...,..58hH@@@@@@@@@Hs       ...,,,,,,,:Gs
 *    r8,        ,,,...,,,,,,,,,,.....  ,h8XABMMHX3r.          .,,,,,,,.rX:
 *   :9, .    .:,..,:;;;::,.,,,,,..          .,,.               ..,,,,,,.59
 *  .Si      ,:.i8HBMMMMMB&5,....                    .            .,,,,,.sMr
 *  SS       :: h@@@@@@@@@@#; .                     ...  .         ..,,,,iM5
 *  91  .    ;:.,1&@@@@@@MXs.                            .          .,,:,:&S
 *  hS ....  .:;,,,i3MMS1;..,..... .  .     ...                     ..,:,.99
 *  ,8; ..... .,:,..,8Ms:;,,,...                                     .,::.83
 *   s&: ....  .sS553B@@HX3s;,.    .,;13h.                            .:::&1
 *    SXr  .  ...;s3G99XA&X88Shss11155hi.                             ,;:h&,
 *     iH8:  . ..   ,;iiii;,::,,,,,.                                 .;irHA
 *      ,8X5;   .     .......                                       ,;iihS8Gi
 *         1831,                                                 .,;irrrrrs&@
 *           ;5A8r.                                            .:;iiiiirrss1H
 *             :X@H3s.......                                .,:;iii;iiiiirsrh
 *              r#h:;,...,,.. .,,:;;;;;:::,...              .:;;;;;;iiiirrss1
 *             ,M8 ..,....,.....,,::::::,,...         .     .,;;;iiiiiirss11h
 *             8B;.,,,,,,,.,.....          .           ..   .:;;;;iirrsss111h
 *            i@5,:::,,,,,,,,.... .                   . .:::;;;;;irrrss111111
 *            9Bi,:,,,,......                        ..r91;;;;;iirrsss1ss1111
 */

-->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta charset="UTF-8">
  <!--IE 8浏览器的页面渲染方式-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <!--默认使用极速内核：针对国内浏览器产商-->
  <meta name="renderer" content="webkit">
  <!--chrome Android 地址栏颜色-->
  <meta name="theme-color" content="#3a3f51" />

  <meta http-equiv="x-dns-prefetch-control" content="on">

  <title>梦想。'Blog - 为了自己的兴趣，我可以付出一切！</title>
  <link rel="icon" type="image/ico" href="https://q1.qlogo.cn/g?b=qq&nk=927507976&s=40">
  <meta name="description" content="一切源于自己的兴趣" />
  <meta name="keywords" content="Windows基础设置,Linux基础设置,PHP源码修改,老毛子 路由器,系统刷机,单片机,代码,维护,web前端,二次元,博客" />
  <meta name="generator" content="Typecho 1.1/17.10.30" />
  <meta name="template" content="handsome" />
  <link rel="stylesheet" href="./lib/layui/css/layui.css">
  <link rel="stylesheet" href="./css/user.css">
  <link rel="stylesheet" href="./css/search.css">
  <link rel="stylesheet" href="./css/label.css">
  <link rel="stylesheet" href="css/articles.css">
  <link rel="stylesheet" href="css/articlesDetail.css">
  <link rel="stylesheet" href="./lib/music/fonts/iconfont.css">
  <link rel="stylesheet" type="text/css" media="screen" href="./lib/music/css/reset.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="./lib/music/css/player.css" />
  <link rel="stylesheet" href="./css/base.css">
</head>

<body>
  <!-- 引入jquery -->
  <script src="./lib/jquery/jquery-3.5.1.min.js"></script>
  <script src="./lib/layui/layui.js"></script>
  <script src="./lib/layui/layui.all.js"></script>

  <!-- 看板娘资源 -->
  <script src="./lib/live2d/live2dw/lib/L2Dwidget.min.js"></script>
  <script src="./lib/live2d/index.js"></script>

<!--  html代码 -->
  <div class="layui-container">
    <div class="layui-row">

      <!--左边-->
      <div class="layui-col-lg2 layui-col-md2 layui-col-sm2 layui-hide-xs user">
        <!--头像-->
          <div class="avatar">
            <img src="./assets/image/avatar.jpg" alt="头像">
          </div>
          <p>用户名</p>
          <hr class="layui-bg-gray">
<!--        用户信息-->
          <div class="layui-row">
            <div class="layui-col-lg4">
              文章
            </div>
            <div class="layui-col-lg4">
              获赞
            </div>
            <div class="layui-col-lg4">
              访问
            </div>
          </div>
<!--        导航栏-->
          <div class="layui-nav">
<!--            文章-->
            <div class="article">
                <p>文章</p>
            </div>
<!--            微语-->
            <div class="mcoo">
              <p>微语</p>
            </div>
<!--            留言-->
            <div class="content">
              <p>留言</p>
            </div>
<!--            关于-->
            <div class="about">
              <p>关于</p>
            </div>
          </div>
      </div>

      <!--右边-->
      <div class="layui-col-lg9 layui-col-lg-offset1 layui-col-md9 layui-col-md-offset1 layui-col-sm9 layui-col-sm-offset1 layui-col-xs12">
        <!--右上-->
        <div class="layui-row">
<!--            音乐播放器-->
            <div class="layui-col-lg8 layui-col-md8 layui-col-sm8 layui-hide-xs">
                <!-- 播放器 -->
                <div class="music-player">
                    <!-- audio标签 -->
                    <audio class="music-player__audio" ></audio>
                    <!-- 播放器主体 -->
                    <div class="music-player__main">
                        <!-- 模糊背景 -->
                        <div class="music-player__blur"></div>
                        <!-- 唱片 -->
                        <div class="music-player__disc">
                            <!-- 唱片图片 -->
                            <div class="music-player__image">
                                <img width="100%" src="" alt="">
                            </div>
                            <!-- 指针 -->
                            <div class="music-player__pointer"><img width="100%" src="./lib/music/images/cd_tou.png" alt=""></div>
                        </div>
                        <!-- 控件主体 -->
                        <div class="music-player__controls">
                            <!-- 歌曲信息 -->
                            <div class="music__info">
                                <h3 class="music__info--title">...</h3>
                                <p class="music__info--singer">...</p>
                            </div>
                            <!-- 控件... -->
                            <div class="player-control">
                                <div class="player-control__content">
                                    <div class="player-control__btns">
                                        <div class="player-control__btn player-control__btn--prev"><i class="iconfont icon-prev"></i></div>
                                        <div class="player-control__btn player-control__btn--play"><i class="iconfont icon-play"></i></div>
                                        <div class="player-control__btn player-control__btn--next"><i class="iconfont icon-next"></i></div>
                                        <div class="player-control__btn player-control__btn--mode"><i class="iconfont icon-loop"></i></div>
                                    </div>
                                    <div class="player-control__volume">
                                        <div class="control__volume--icon player-control__btn"><i class="iconfont icon-volume"></i></div>
                                        <div class="control__volume--progress progress"></div>
                                    </div>
                                </div>

                                <!-- 歌曲播放进度 -->
                                <div class="player-control__content">
                                    <div class="player__song--progress progress"></div>
                                    <div class="player__song--timeProgess nowTime">00:00</div>
                                    <div class="player__song--timeProgess totalTime">00:00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--            &lt;!&ndash; 歌曲列表 &ndash;&gt;-->
                    <!--            <div class="music-player__list">-->
                    <!--                <ul class="music__list_content">-->
                    <!--                </ul>-->
                    <!--            </div>-->
                </div>
            </div>
            <!--搜索框-->
            <div class="layui-col-lg4 layui-col-md4 layui-col-sm4 layui-col-xs12">
              <div class="search">
                  <input type="text" name="search" value="" maxlength="20" placeholder="请输入文章标题" autocomplete="off">
                  <i class="layui-icon layui-icon-search"></i>
              </div>
            </div>
        </div>

        <!--        文章内容-->
        <div class="layui-row">
            <div class="layui-col-lg8 layui-col-md8 layui-col-sm8 layui-col-xs12">
<!--              //第二步：建立视图。用于呈现渲染结果。-->
              <div id="view"></div>
            </div>

<!--            标签页面-->
            <div class="layui-col-lg3 layui-col-md3 layui-col-md-offset1 layui-col-sm3 layui-col-sm-offset1 layui-hide-xs">
              <div class="label" id="tags">
                  <div id="label_view"></div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>

  <!-- 背景图 -->
  <div id="landlord" style="display: none">
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
  </div>

  <!-- 背景样式 -->
  <script src="js/background_style.js"></script>
  <!-- 鼠标特效 -->
  <script src="js/cursor_style.js"></script>

  <!-- 标签随机颜色 -->
  <script src="js/label.js"></script>

  <!-- 标签模板 -->
  <script id="label" type="text/html">
      <!--    //第一步：编写模版。你可以使用一个script标签存放模板，如：-->
      <h3>{{ d.title }}</h3>
      {{#  layui.each(d.list, (index, item) => { }}
          <span>{{ item }}</span>
      {{#  }); }}
  </script>

<!-- 文章模板 -->
  <script id="article" type="text/html">
      {{#  layui.each(d, (index, item) => { }}
<!--    //第一步：编写模版。你可以使用一个script标签存放模板，如：-->
        <div class="articles">
            <div class="layui-row" onclick="detail()" id={{ item.id }}>
                {{#  if(item.image !== ''){ }}
                <div class="layui-col-lg6 layui-col-md6 layui-col-sm6 layui-col-xs12">
                    <div class="img">
                        <img src={{ item.image }} alt="">
                    </div>
                </div>
                <div class="layui-col-lg6 layui-col-md6 layui-col-md6 layui-col-xs12">
                    <div class="text">
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.desc }}</p>
                    </div>
                    <div class="articles_label">
                        {{#  layui.each(item.label, (index, item_label) => { }}
                            <span>{{ item_label }}</span>
                        {{#  }); }}
                    </div>
                    <div class="time">
                        <i class="layui-icon layui-icon-time"></i>
                        <span>{{ item.create_time }}</span>
                    </div>
                </div>
                {{#  } else { }}
                <div class="articles_text">
                    <div class="text">
                        <h3>{{ item.title }}</h3>
                        <p>{{ item.desc }}</p>
                    </div>
                    <div class="articles_label">
                        {{#  layui.each(item.label, (index, item_label) => { }}
                        <span>{{ item_label }}</span>
                        {{#  }); }}
                    </div>
                    <div class="time">
                        <i class="layui-icon layui-icon-time"></i>
                        <span>{{ item.create_time }}</span>
                    </div>
                </div>
                {{#  } }}
            </div>
        </div>
      {{#  }); }}
      <div class="page">
          <div id="demo0"></div>
      </div>
  </script>

<!--  文章详情内容-->
  <script id="articleDetail" type="text/html">
      <div class="articlesDetail">
<!--        面包屑导航  -->
          <div class="layui-row">
              <span class="layui-breadcrumb">
                  <a href="">博文</a> >
                  <a href="">{{ d.title }}</a>
              </span>
          </div>
<!--      文章标题 -->
          <div class="layui-row title">
              <p>{{ d.title }}</p>
          </div>
<!--      阅读量和修改时间以及获赞    -->
          <div class="layui-row">
              阅读量---获赞量---更新时间
          </div>
<!--      文章内容 -->
          <div class="layui-row content">
              {{ d.content }}
          </div>
      </div>
<!--   发表评论输入框   -->
      <div class="content_create">
          <div class="layui-row title">
              <div class="layui-col-lg6 layui-col-md6 layui-col-sm6 layui-hide-xs">
                  发表评论
              </div>
              <div class="layui-col-lg6 layui-col-md6 layui-col-sm6 layui-hide-xs" style="text-align: right; margin-bottom: 3px">
                  <button type="button" class="layui-btn layui-btn-sm">发布评论</button>
              </div>
              <hr>
          </div>
          {{# if (d.c_status == 1) { }}
            <div class="text">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入留言人" autocomplete="off" class="layui-input">
                <textarea required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
                <div class="layui-row">
                    <div class="layui-hide-lg layui-hide-md layui-hide-sm layui-col-xs12">
                        <button type="button" class="layui-btn">发布评论</button>
                    </div>
                </div>
            </div>
          {{# }else { }}
            <div>
                不允许评论
            </div>
          {{# } }}
      </div>
<!--  评论内容 -->
      <div class="contents">
          <div class="layui-row">
            全部评论：<span class="c_num">{{ d.c_num }}</span>
          </div>
          <hr>
<!--      评论人以及时间 -->
          {{#  layui.each(d.contents, (index, item) => { }}
          <div>
              <div class="layui-row">
                <div class="layui-col-lg6 layui-col-md6 layui-col-sm6 layui-col-xs12 username">
                    {{ item.username }}
                </div>
    <!--        评论时间 -->
                <div class="layui-col-lg6 layui-col-md6 layui-col-sm6 layui-col-xs12 time">
                  {{ item.time }}
                </div>
              </div>
    <!--      评论内容 -->
              <div class="layui-row content">
                  {{ item.content }}
              </div>
          </div>
          {{#  }); }}
      </div>
      <div class="page">
          <div id="contents_page"></div>
      </div>
  </script>

<!-- 引入配置文件  -->
  <script src="./js/config.js"></script>
  <!-- 分页 -->
  <script src="js/pages.js"></script>

  <!-- 文章内容渲染 -->
  <script src="js/articles.js"></script>

  <!-- 跳转文章详情页面 -->
  <script src="js/articles_detail.js"></script>

  <!-- 文章内容 -->
  <script>
    // 文章分页
    pages("demo0", 50)
    pages("contents_page", 50)
  </script>

  <script src="./lib/music/js/utill.js"></script>
  <script src="./lib/music/js/jquery.min.js"></script>
  <script src="./lib/music/js/player.js"></script>
</body>

</html>